<template>
    <div class="scroll-container">
      <div 
        v-for="(item, index) in items" 
        :key="index" 
        class="item"
      >
        {{ item }}
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 列表数据
  const items = ref([
    '项目 1',
    '项目 2',
    '项目 3',
    '项目 4',
    '项目 5',
    '项目 6'
  ]);
  </script>
  
  <style scoped>
  .scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
  }
  
  .item {
    display: inline-block;
    width: 200px;
    height: 150px;
    background-color: #f0f0f0;
    margin-right: 10px;
    line-height: 150px;
    text-align: center;
    border: 1px solid #ccc;
    vertical-align: top; /* 防止 inline-block 出现错位 */
  }
  </style>